var BINDBANK1 = `
<div>
    <div id='mask-bank1' v-if='open'></div>
    <transition enter-active-class='animated bounceIn'>
        <div id='mask-1-bank1' v-if='offBind=="1"'>
            <div class='mask-con'>
                <div class='dis-spa edit-tit-bank1'>
                    <span style="opacity:0;">1</span>
                    <span>绑定银行卡</span>
                    <img class='hover' @click='closeAlipy' src="./img/close.svg" style="width:22px;height:22px;">
                </div>
                <div class='mask-con-wrap-bank1'>
                    <div class='edit-input-bank1'>
                        <input type="text" placeholder="真实姓名">
                    </div>
                    <div class='mask-select-bank1'>
                        <el-select style="width:100%;" v-model="seleCerType" placeholder="证件类型">
                            <el-option key="1" label="二代身份证" value="二代身份证">
                            </el-option>
                            <el-option key="2" label="驾驶证" value="驾驶证">
                            </el-option>
                        </el-select>
                    </div>
                    <div class='edit-input-bank1'>
                        <input type="text" placeholder="证件号码">
                    </div>
                    <p class='edit-noti-bank1'>这里是一条提示内容</p>
                    <div class='edit-sure-bank1'>
                        <button @click='offBind="2"'>下一步</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>

    <transition enter-active-class='animated bounceIn'>
        <div id='mask-1' v-if='offBind=="2"'>
            <div class='mask-con'>
                <div class='dis-spa edit-tit-bank1'>
                    <span style="opacity:0;">1</span>
                    <span>绑定银行卡</span>
                    <img class='hover' @click='closeAlipy' src="./img/close.svg" style="width:22px;height:22px;">
                </div>
                <div class='mask-con-wrap-bank1'>
                    <div class='edit-input-bank1'>
                        <input type="text" placeholder="银行卡号">
                    </div>
                    <div class='mask-select-bank1'>
                        <el-select style="width:100%;" v-model="seleCard" placeholder="选择银行卡">
                            <el-option key="1" label="中国银行" value="中国银行">
                            </el-option>
                            <el-option key="2" label="工商银行" value="工商银行">
                            </el-option>
                        </el-select>
                    </div>
                    <div class='mask-select-bank1' style='margin-top: 10px;'>
                        <el-select style="width:100%;" v-model="seleCardType" placeholder="选择银行卡类型">
                            <el-option key="1" label="储蓄卡" value="储蓄卡">
                            </el-option>
                            <el-option key="2" label="借记卡" value="借记卡">
                            </el-option>
                        </el-select>
                    </div>
                    <div class='dis-spa edit-invi-code-bank2'>
                        <input type="text" placeholder="预留手机号">
                        <span class='hover'>获取验证码</span>
                    </div>
                    <div class='edit-input-bank1'>
                        <input type="text" placeholder="验证码">
                    </div>
                    <p class='edit-noti-bank1'>这里是一条提示内容</p>
                    <div class='dis-spa bind-card-2-bank2'>
                        <button @click='offBind="1"'>上一步</button>
                        <button>确认绑定</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</div>
`;
Vue.component('bind-bank1', {
    props: ['open'],
    data: function() {
        return {
            //1：绑定银行卡第一步  2：绑定银行卡第二步  false:不打开弹窗
            offBind: false,
            //证件类型  身份证等
            seleCerType: '',
            //选择的卡的银行  中国银行等
            seleCard: '',
            //卡的类型  储蓄卡/借记卡
            seleCardType: ''
        }
    },
    watch: {
        open: function(val) {
            if (val) {
                this.replaceIcon();
                this.offBind = '1';
            }
        },
        offBind: function(val) {
            this.replaceIcon();
        }
    },
    methods: {
        //关闭
        closeAlipy: function() {
            this.offBind = false;
            this.$emit('close_bank');
        },
        //替换下拉框图标
        replaceIcon: function() {
            this.$nextTick(function() {
                var par = $('.el-input__suffix-inner');
                par.children().remove();
                par.append('<img src="./img/down.svg" style="opacity:.5;width:20px;height:20px">');
            });
        }
    },
    template: BINDBANK1
});